<!DOCTYPE html>
<html ng-app="eventExample">

<head>
  <script src="../node_modules/angular/angular.js"></script>
</head>

<body>
  <div ng-controller="EventController">
    RootScope: {{count}}
    <ul>
      <li ng-repeat="i in [1]" ng-controller="EventController">
        <button ng-click="$emit('MyEvent')">$emit('MyEvent')</button>
        <button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button>
        <br>
        Middle Scope: {{count}}
        <ul>
          <li ng-repeat="item in [1, 2]" ng-controller="EventController">
            Leaf Scope: {{count}}
          </li>
        </ul>
      </li>
    </ul>
  </div>

  <script>
    angular.module('eventExample', [])
      .controller('EventController', ['$scope', function ($scope) {
        $scope.count = 0;
        $scope.$on('MyEvent', function () {
          $scope.count++;
        });
      }]);
  </script>
</body>

</html>